<template>
	<view class="custom-navbar" :style="customStyle">
		<view class="search-bar" :style="style">
			<view class="icon">
				<u-icon name="search" :color="iconColor" size="32"></u-icon>
			</view>
			<!--     <view class="search" @click="toSearch()">
        <u-search placeholder="搜索" :show-action="false"></u-search>
      </view> -->
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			iconColor: {
				type: String,
				default: '#fff',
			},
			background: {
				type: String,
				default: 'transparent',
			},
		},
		data() {
			return {
				systemInfo: {},
				logo: '',
			}
		},
		computed: {
			customStyle() {
				if (!this.systemInfo.statusBarHeight) {
					return false
				}
				const heigth = this.systemInfo.statusBarHeight ? this.systemInfo.statusBarHeight + 44 : 44
				return `height: ${heigth}px; background: ${this.background}`
			},
			style() {
				if (!this.systemInfo.statusBarHeight) {
					return false
				}
				const StatusBar = this.systemInfo.statusBarHeight
				const style = `height:${44 + StatusBar}px;padding-top:${StatusBar}px;`
				return style
			},
		},
		methods: {
			toSearch() {
				this.$emit('toSearch', {})
			},
		},
		created() {
			uni.getSystemInfo({
				success: (info) => {
					this.systemInfo = info
				},
				fail: (erro) => {
					return
				},
			})
		},
	}
</script>

<style lang="scss" scoped>
	.custom-navbar {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		z-index: 999;
	}

	.search-bar {
		display: flex;
		align-items: center;

		.icon {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 20rpx 0 30rpx;
			width: 60rpx;
			height: 60rpx;

			image {
				max-width: 100%;
				max-height: 100%;
			}
		}

		.search {
			width: 430rpx;
		}
	}
</style>
